$('#top').load('top.html');
$('#bottom').load('bottom.html');
// ---

// 0. 获取元素
// 0-1. 获取分类盒子
// const cateBox = document.querySelector('.category')
// 0-2. 获取功能盒子
const box = document.querySelector('.box')
// 0-3. 获取筛选盒子
// const filterBox = document.querySelector('.filter')
// 0-4. 获取折扣类型盒子
// const saleTypeBox = document.querySelector('.saleType')
// 0-5. 获取排序按钮
const sortBox = document.querySelector('.sort')
// 0-6. 获取 select 盒子
const select = document.querySelector('select')
// 0-7. 获取 input 搜索盒子
// const inp = document.querySelector('.searchBox > input')
// 0-8. 获取页面显示信息盒子
const pageInfoBox = document.querySelector('.pageInfo')
// 0-9. 获取商品列表盒子
const contentBox = document.querySelector('.content')

// 所有和请求相关的参数信息
const info = {
	current: 1,
	pagesize: 12,
	// 	search: '',
	// 	filter: '',
	// 	saleType: 10,
	// 	sortType: 'id',
	// 	sortMethod: 'ASC',
	// 	category: ''
}

// 总页数
let total = 10

//------------------------------------------------------------

box.addEventListener('click', e => {
	e = e || window.event
	const target = e.target || e.srcElement

	// 2-3. 判断点击的是哪一类按钮
	// 分类按钮
	if (target.className === 'cate') {
		// 点击的这个有类名, 其余所有的没有类名
		for (var i = 0; i < cateBox.children.length; i++) {
			cateBox.children[i].classList.remove('active')
		}
		target.classList.add('active')

		// 拿到分类内容
		info.category = target.innerText === '全部' ? '' : target.innerText
		info.current = 1

		// 用最新的 info 请求列表数据
		getGoodsList()
	}

	// 筛选按钮
	if (target.className === 'f') {
		// 点击的这个有类名, 其余所有的没有类名
		for (var i = 0; i < filterBox.children.length; i++) {
			filterBox.children[i].classList.remove('active')
		}
		target.classList.add('active')

		// 拿到筛选内容
		info.filter = target.dataset.filter ? target.dataset.filter : ''
		info.current = 1

		// 用最新的 info 请求列表数据
		getGoodsList()
	}

	// 折扣按钮
	if (target.className === 's') {
		for (var i = 0; i < saleTypeBox.children.length; i++) {
			saleTypeBox.children[i].classList.remove('active')
		}
		target.classList.add('active')

		// 拿到筛选内容
		info.saleType = target.innerText === '全部' ? 10 : target.innerText
		info.current = 1

		// 用最新的 info 请求列表数据
		getGoodsList()
	}

	// 排序按钮
	if (target.className === 'sort2') {
		for (var i = 0; i < sortBox.children.length; i++) {
			sortBox.children[i].classList.remove('active')
		}
		target.classList.add('active')

		// 拿到当前标签代表的 排序类型(id/sale/price)  排序方式(ASC/DESC)
		info.sortType = target.dataset.type ? target.dataset.type : 'id'
		info.sortMethod = target.dataset.method ? target.dataset.method : 'ASC'

		// 用最新的 info 请求列表数据
		getGoodsList()
	}

	// 上一页
	if (target.className === 'prev') {
		// 直接 current--
		if (info.current <= 1) return
		info.current--
		getGoodsList()
	}

	// 下一页
	if (target.className === 'next') {
		if (info.current >= total) return
		info.current++
		getGoodsList()
	}
})

// 2-3. 选择一页显示多少条
select.addEventListener('change', () => {
	info.pagesize = select.value
	info.current = 1
	getGoodsList()
})


//------------------------------------------------------------

// 3. 请求列表数据
getGoodsList()
async function getGoodsList() {

	const objs = {
		__timestamp: new Date().getTime(),
		sortType: '0',
		descSorted: 'false',
		subCategoryId: '109274000',
		deliveryAreaId: '0',
		categoryId: '1005000'
	}

	pAjax({
		url: '/xmzlists',
		data: querystringify(objs),
		dataType: 'json',
	}).then(ress => {
		// console.log(ress.data.itemList);
		var lists = ress.data.itemList

		console.log(lists);
		console.log(lists[2].name);
		console.log(lists[2].simpleDesc);
		console.log(lists[2].retailPrice);
		console.log(lists[0].counterPrice);
		console.log(lists[2].listPicUrl);
		console.log(lists[2].scenePicUrl);
		if (lists[0].itemTagList != '') {
			console.log(lists[0].itemTagList[0].name); //七夕特惠
		}
		console.log(lists[2].id);

		// 3-3. 给 total 赋值
		total = Math.ceil(lists.length / info.pagesize)


		
		// 3-4. 渲染当前页信息
		pageInfoBox.innerText = `${ info.current } / ${ total }`

		// 3-5. 渲染商品列表
		let str = ''

		lists.forEach(item => {
			if (item.counterPrice == null) {
				item.counterPrice = ''
			} else {
				item.counterPrice = '￥' + item.counterPrice
			}
			if (item.itemTagList == '') {
				item.itemTagList = [{
					name: '特惠'
				}]
			}
			str += `
			<li>
            <a href="./detail.html">
                <div class="show">
                    <img data-id="${ item.id }" src="${ item.listPicUrl }">
                </div>
                <div class="info">
                    <p> ${ item.itemTagList[0].name } </p>
                    <p class="title">${ item.name }</p>
                    <p class="price">
                        <span class="current"> ${ '￥' +item.retailPrice } </span>
                        <del class="old"> ${ item.counterPrice } </del>
                    </p>
                    <p>${ item.simpleDesc }</p>
                </div>
            </a>
		</li>`
		})

		contentBox.innerHTML = str
	})
}



// 点击的时候可以跳转到详情页

contentBox.addEventListener('click', async e => {
	e = e || window.event
	const target = e.target || e.srcElement

	//4-2. 判断点击的是什么
	if (target.nodeName === 'IMG') {
		// window.location.href = './detail.html'

		// 拿到商品 id, 放在 sessionStorage 内
		// 渲染页面的时候, 可以直接渲染好
		const id = target.dataset.id
		// 存储好
		window.sessionStorage.setItem('id', id)
		// 跳转页面
		window.location.href = './detail.html'
	}

	// 判断加入购物车
	if (target.nodeName === 'BUTTON') {
		// 如果你没有登录, 不能加入购物车
		// 验证登录过
		// 4-2-1. 判断是否登录过
		// login 信息
		const login = window.localStorage.getItem('login')
		if (!login) {

			// 跳转回到登录页
			window.localStorage.setItem('url', 'list')
			window.location.href = './login.html'
			return
		}

		// 4-2-2. 拿到 商品id 和 用户id
		const id = window.localStorage.getItem('id')
		const goods_id = target.dataset.id
		const token = window.localStorage.getItem('token')

		// 4-2-3. 发送请求加入购物车
		const res = await pAjax({
			url: 'http://localhost:8888/cart/add',
			method: 'POST',
			data: `id=${ id }&goodsId=${ goods_id }`,
			dataType: 'json',
			token: token
		})

		/// 4-2-4. 判断是否加入成功了
		if (res.code !== 1) {
			// 跳转回到登录页
			window.localStorage.setItem('url', 'list')
			window.location.href = './login.html'
			return
		}

		// 代码执行到这里, 说明登录完成, 已经加入购物车完成
		alert('加入购物车成功')
	}
}) 



















// $.ajax({
// 	url: '../json/aboutMore1.json',
// 	type: 'get',
// 	dataType: 'json',
// 	success: function (json) {
// 		$.each(json, function (index, item) {
// 			var dom = `
// 			<div class="list_show_add ${json[index].leiming}" code = "${json[index].code}">
// 				<a href="detail.html"><img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3458475739,295617657&fm=26&gp=0.jpg"  class="lazyload" data-src="${json[index].imgurl}">
// 				<p><span>${json[index].title}</span></p>
// 				<h3>${json[index].title1}</h3>
// 				<h4>${json[index].title2}</h4>
// 				<div></div>
// 				<h2>${json[index].title3}</h2></a>
// 			</div>`;
// 			$('.listMore .list_show').append(dom);
// 			lazyload()
// 		});
// 	},
// });